<template>
  <div class="bottom-container">
    <div class="content">
      <table>
        <tr class="table-row">
          <td>
            <el-button
              type="danger"
              icon="el-icon-switch-button"
              round
              class="run-button"
              @click="run()"
            >
              <span class="run-button-text">{{ isRun ? '立即停止' : '立即启动' }}</span>
            </el-button>
          </td>
        </tr>
        <tr class="table-row">
          <td class="runtime-text">已运行时间：2天5小时34分钟</td>
        </tr>
        <tr class="table-row">
          <td class="switch-label">禁用格口急停</td>
          <td>
            <el-switch v-model="value"></el-switch>
          </td>
        </tr>
        <tr class="table-row">
          <td class="switch-label">禁用主电柜急停</td>
          <td>
            <el-switch v-model="value2"></el-switch>
          </td>
        </tr>
        <tr class="table-row">
          <td class="switch-label">禁用供包台急停</td>
          <td>
            <el-switch v-model="value3"></el-switch>
          </td>
        </tr>
      </table>
    </div>

    <div class="speed-info">
      <span class="speed-label">当前线体速度</span>
      <span class="speed-value">2.03m/s</span>
    </div>

    <div ref="linechart" class="chart"></div>

    <div class="car-info">
      <span class="car-label">已上件小车数量</span>
      <span class="car-value">237</span>
      <span class="car-unit">辆</span>
    </div>

    <div ref="pieChart" class="chart-small"></div>

    <div class="alarm-records">
      <table class="alarm-table">
        <tr>
          <th class="alarm-title">报警记录</th>
        </tr>
        <tr class="alarm-row">
          <td class="alarm-date">2023年1月2日</td>
          <td class="alarm-time">17:29:11</td>
          <td>急停被按下，请检查</td>
        </tr>
        <tr class="alarm-row">
          <td></td>
          <td class="alarm-time">17:29:10</td>
          <td>7号伺服报警</td>
        </tr>
        <tr class="alarm-row">
          <td></td>
          <td class="alarm-time">17:29:09</td>
          <td>8号伺服报警</td>
        </tr>
        <tr class="alarm-row">
          <td class="alarm-date">2023年1月1日</td>
          <td class="alarm-time">17:29:11</td>
          <td>急停被按下，请检查</td>
        </tr>
        <tr class="alarm-row">
          <td></td>
          <td class="alarm-time">17:29:10</td>
          <td>7号伺服报警</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      value: false,
      value2: true,
      value3: true,
      isRun: false,
    };
  },
  mounted() {
    this.createChart();
    this.createPieChart();
  },
  methods: {
    createChart() {
      const chartDom = this.$refs.linechart;
      const myChart = echarts.init(chartDom);
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu'],
          show: false,
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        series: [
          {
            data: [150, 230, 190, 218],
            type: 'line',
            itemStyle: {
              opacity: 0,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    createPieChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'item',
        },
        title: {
          text: '92.4%',
          left: 'center',
          top: 88,
          textStyle: {
            fontSize: 20,
            color: '#3cbe8e',
            align: 'center',
          },
        },
        color: ['#3cbe8e', '#31343b'],
        series: [
          {
            type: 'pie',
            radius: ['90%', '95%'],
            center: ['50%', '50%'],
            startAngle: 90,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 237, name: '已上件' },
              { value: 20, name: '' },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    run() {
      this.isRun = !this.isRun;
      this.$emit('run', this.isRun);
    },
  },
};
</script>

<style scoped>
.bottom-container {
  background: #292b2f;
  height: 168px;
  position: absolute;
  bottom: 10px;
  width: calc(100% - 361px);
  padding: 20px 6px;
  border-radius: 14px;
  display: flex;
  left: 17.5%;
  z-index: 99;
}
.table-row {
  height: 35px;
  color: #ffffff;
}

.content {
  margin-left: 130px;
  width: 260px;
  height: 300px;
  display: inline-block;
}

.run-button {
  width: 120px;
  padding: 0px 14px;
  background-color: #f62358;
  border-color: #f62358;
  margin-bottom: 8px;
}

.runtime-text {
  font-size: 12px;
}

.switch-label {
  width: 180px;
}

.speed-info {
  display: inline-block;
  margin-left: 50px;
}

.speed-label {
  display: block;
  margin-top: 58px;
  margin-bottom: 20px;
  color: #c1c0c0;
}

.speed-value {
  font-size: 23px;
  color: white;
}

.chart {
  width: 200px;
  height: 200px;
  display: inline-block;
}

.car-info {
  display: inline-block;
  margin-left: 50px;
}

.car-label {
  display: block;
  margin-top: 58px;
  margin-bottom: 20px;
  color: #c1c0c0;
}

.car-value {
  font-size: 23px;
  color: white;
}

.car-unit {
  color: white;
}

.chart-small {
  width: 120px;
  height: 200px;
  margin-left: 20px;
  display: inline-block;
}

.alarm-records {
  display: inline-block;
  margin-left: 90px;
  color: white;
}

.alarm-table {
  font-size: 14px;
}

.alarm-title {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  height: 40px;
}

.alarm-row {
  height: 30px;
}

.alarm-date {
  width: 110px;
}

.alarm-time {
  width: 90px;
}
</style>
